<script setup lang="ts">
import { getPostApi } from '@/api/path/post';
import PostUnit from '@/components/post/PostUnit.vue'
import InfoCard from '@/components/post/PostInfoCard.vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute(); 
const postid = ref(route.query.postId)


const post = ref({})
onMounted(() => { 
  window.scrollTo(0, 0);
  if(postid.value){
      getPost(postid.value);
    }
});


const getPost = (postid: string) => {
  getPostApi(postid).then(res => {
    if (res.errno === 1) {
      post.value = res.post;
    }else{
    }
  })
};
// post.value = await getPost(postid.value); 

</script>
<template>
  <div class="all-container">
    <el-row :gutter="20">
        <el-col :span="8">
            <!-- 用户信息展示区域 -->
        <div class="information">
          <el-affix :offset="80">
            <InfoCard />
          </el-affix>
        </div>
        </el-col>
        <el-col :span="10" style="padding-left: 0px;padding-right: 0px;">
            <!-- 动态详情 -->
            <div class="post-area" v-show="post">
                <!-- 动态详情区域 -->
                <PostUnit :post="post" :showCommentBox="true"/>
            </div>
        </el-col>
    </el-row>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>
<style scoped>
div.el-row{
  padding-left: 0;
  padding-right: 0;
}
.all-container {
  overflow-x: hidden;
  padding-top: 10px;
  width: 100%;
  height: auto;
  background-color: var(--color-light);
  min-height: 93vh;
}
.information {
  flex: 0 0 300px; 
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
}

.post-area {
  background-color: var(--color-light);
  display: flex;
  flex-direction: column; 
}

.post-send, .post-list {
  background-color: white; 
  margin-bottom: 20px; 
}

.post-send {
  width:auto;
}

.post-list {
    width:auto;
}
</style>